const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

function resolve(dir) {
	return path.resolve(__dirname, dir)
}

module.exports = {
	// 指定构建环境
	mode: 'development',
	// 入口
	entry: {
		app: './src/index.jsx'
	},
	// 出口
	output: {
		path: resolve('./dist'),
		filename: '[name].js',
		publicPath: './' // 打包后的资源的访问路径前缀
	},
	// 模块
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/, // 匹配 js 和 jsx 文件
				exclude: /node_modules/, // 屏蔽不需要处理的文件（文件夹）
				loader: 'babel-loader'
			},
			{
				test: /\.css$/,
				use: [
					{
						loader: 'style-loader' // 创建 <style></style>
					},
					{
						loader: 'css-loader' // 转换 css
					}
				]
			},
			{
				test: /\.scss$/,
				use: [
					{
						loader: 'style-loader'
					},
					{
						loader: 'css-loader'
					},
					{
						loader: 'sass-loader'
					}
				]
			},
			{
				test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 正确解析图片
				loader: 'url-loader',
				options: {
					limit: 10000, // url-loader 包含 file-loader，这里不用 file-loader, 小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入
					name: 'static/img/[name].[hash:7].[ext]'
				}
			},
			{
				test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 解析字体文件
				loader: 'url-loader',
				options: {
					limit: 10000, // 小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入
					name: 'static/fonts/[name].[hash:7].[ext]'
				}
			}
		]
	},
	// 插件
	plugins: [
		new HtmlWebpackPlugin({
			filename: resolve('./dist/index.html'), // html模板的生成路径
			template: './public/index.html', // html模板
			inject: true, // true：默认值，script标签位于html文件的 body 底部
			favicon: './public/favicon.ico'
		})
	],
	// 开发环境本地启动的服务配置
	devServer: {
		contentBase: path.join(__dirname, './src/'), // 入口路径
		open: true, // 自动打开浏览器
		publicPath: '/',
		host: '127.0.0.1',
		port: 8080,
		stats: {
			colors: true
		}
	},
	// 是否警告单文件包体过大
	performance: {
		hints: false
	}
}
